<!doctype html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>标题</title>
<meta name='Keywords' content=''>
<meta name='Description' content=''>
<style type='text/css'>
*{margin:0px; padding:0px; list-style-type:none;}
div.infeedAccordion{width:800px; height:350px;  margin:50px auto; background:pink;}
ul.infeedAccordion{width:120%; height:inherit;}
ul.infeedAccordion li.con{width:85px; height:inherit; float:left;}
ul.infeedAccordion li.liHover{width:460px;}
</style>
</head>
<body>
<div class='infeedAccordion'>
	<ul class='infeedAccordion'>
		<li class='con' style='background:red;'></li>
		<li class='con' style='background:orange;'></li>
		<li class='con liHover' style='background:yellow;'></li>
		<li class='con' style='background:green;'></li>
		<li class='con' style='background:cyan;'></li>
	</ul>
</div>
<script type='text/javascript' src='../js/jquery-1.8.3.min.js'></script>
<script type="text/javascript">
(function($){
    $.fn.extend({
        'infeedAccordion':function(options){
            var opts = $.extend({},infeedAccordion_defaluts,options);
            var $this  = $(this);
			var $thisAll = $(this).find('*');
			opts.liWidth = $this.find('li.con').width();
			opts.liSize = $this.find('li.con').size();
			$this.find('li.con').each(function(index){				
				if($(this).hasClass(opts.liHover)){
					opts.liIndex = index;
				};
				opts.liArray.push($(this).width());
			});
			opts.liMaxWidth = Math.max.apply(Math,opts.liArray);
			opts.liMinWidth = Math.min.apply(Math,opts.liArray);
            $this.find('li.con').bind(opts.effect,function(){
				opts.liIndex = $(this).index();
				if($(this).width() != opts.liMaxWidth){
					partCom(opts.liIndex);
				};
			});
			if(opts.autoPlay){
				function autoPlay(){
					clearInterval(opts.timer);
					opts.timer = setInterval(function(){
						opts.liIndex++;
						opts.liIndex = opts.liIndex%opts.liSize;
						partCom(opts.liIndex);
					},opts.setIntervalTime);
				};
				autoPlay();
				function clearIntervalFun(cleatIntervalObj){
					$(cleatIntervalObj).bind('mouseover',function(){
						clearInterval(opts.timer);
					});
					$(cleatIntervalObj).bind('mouseout',function(){
						autoPlay();
					});
				};
				clearIntervalFun($this);
				clearIntervalFun($thisAll);
			};
			function partCom(){
				opts.onClickFunction();
				$this.find('li.con').eq(opts.liIndex).stop(true).animate({width:opts.liMaxWidth+'px'},opts.animateTime).siblings().stop(true).animate({width:opts.liMinWidth+'px'},opts.animateTime);
			};			
        }
    });
    var infeedAccordion_defaluts = {
		liWidth:'',
		liHover:'liHover',
		liHoverWidth:'',
		liArray:[],
		liMaxWidth:'',
		liMinWidth:'',
		liIndex:0,
		liSize:'',
		animateTime:500,
		setIntervalTime:2500,
		autoPlay:true,
		effect:'click',
		timer:null,
		onClickFunction:function(){}
	};
}(window.jQuery));
$('ul.infeedAccordion').infeedAccordion({
	animateTime:500,
	setIntervalTime:2500,
	autoPlay:false,
	effect:'click',//click or hover
	onClickFunction:function(){}
});
</script>
<!-- <script type='text/javascript'>
	//var s = min('20,30');
	//console.log(s);
	var arry = [];
	$('ul.infeedAccordion>li.con').each(function(){
		var s = $(this).width();
		arry.push(s);
	});
	var maxInNumbers = Math.max.apply(Math,arry);
	var minInNumbers = Math.min.apply(Math,arry);
	console.log(arry);
	console.log(maxInNumbers);
	console.log(minInNumbers);
</script> -->
<!-- <script type='text/javascript'>
(function(){
$('ul.box>li').hover(function(){
	$(this).stop(true).animate({width:"425px"},500).siblings().stop(true).animate({width:"85px"},500);
});
})();
</script> -->
</body>
</html>